<template>
  <div class="d-flex justify-center align-center">
    <span class="spinner" :style="_style"></span>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { dark } from '@/plugins/vuetify'

const props = defineProps({
  size: {
    type: String,
    default: '32',
  },
  type: {
    type: String,
    default: 'solid',
  },
  color: {
    type: String,
    default: 'grayscale',
  },
  weight: {
    type: String,
    default: '4',
  },
  duration: {
    type: String,
    default: '1.5',
  },
})

const _color = computed(() => dark.colors[props.color])

const _style = computed(() => {
  return {
    width: `${props.size / 16}rem`,
    height: `${props.size / 16}rem`,
    borderStyle: props.type,
    borderColor: _color.value,
    borderTopColor: 'transparent',
    borderWidth: `${props.weight / 16}rem`,
    animationDuration: `${props.duration}s`,
  }
})
</script>
<style scoped lang="scss">
.spinner {
  display: inline-block;
  border-radius: 50%;
  animation: spin linear infinite;
  border-style: double;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>
